<script setup>
import { ref } from "vue";
import XgVideo from "@/components/XgVideo/index.vue";
import LineChart from "@/components/BaseEchart/index.vue";
import eventBus from "@/utils/eventBus.js"

const config = ref({
  id: "mse1",
  url: "//sf1-cdn-tos.huoshanstatic.com/obj/media-fe/xgplayer_doc_video/mp4/xgplayer-demo-360p.mp4",
  poster:
    "//lf9-cdn-tos.bytecdntp.com/cdn/expire-1-M/byted-player-videos/1.0.0/poster.jpg",
  width: "100%",
  height: "100%",
});

const chartLineOption = ref({
  title: {
    text: "ECharts 入门示例",
  },
  tooltip: {},
  xAxis: {
    data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"],
  },
  yAxis: {},
  series: [
    {
      name: "销量",
      type: "bar",
      data: [5, 20, 36, 10, 10, 20],
    },
  ],
});

function testMitt() {
  eventBus.emit('testMitt', '123')
}
</script>

<template>
  <div class="the-left">
    <span class="gl-f-18 gl-f-tcolor1 gl-f-b" @click="testMitt">左侧123</span>
    <div class="monitor-container"><XgVideo :config="config" /></div>
    <div class="chart-content">
      <LineChart :options="chartLineOption" />
    </div>
  </div>
</template>

<style lang="scss" scoped>
.the-left {
  width: 300px;
  height: 750px;
  background-color: aquamarine;

  .monitor-container {
    height: 250px;
  }

  .chart-content {
    height: 250px;
  }
}
</style>
